<template>
  <div class="login">
    <vue-particles color="#dedede" :particleOpacity="0.9" :particlesNumber="120" shapeType="circle" :particleSize="4"
      linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
    </vue-particles>
    <div class="form">
      <div class="title">
        <div>{{ Name }}</div>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
        <el-form-item prop="Name">
          <div class="yhm">
            <div>用户名</div>
            <el-input v-model="ruleForm.UserName"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="Pwd">
          <div class="mm">
            <div>密码</div>
            <el-input type="PassWord" v-model="ruleForm.PassWord" autocomplete="off"></el-input>
          </div>
        </el-form-item>
        <div class="xhtml" @click="dialogVisible1">修改密码?</div>
        <el-button style="
            width: 300px;
            height: 40px;
            letter-spacing: 10px;
            font-size: 18px;
          " type="primary" @click="login">登录
        </el-button>
        <div class="banben">版本号v2.1.2</div>
      </el-form>
    </div>
    <el-dialog title="修改用户密码" :visible.sync="dialogVisible" width="25%" :modal-append-to-body='false'
      :close-on-click-modal="false">
      <div>
        <el-form :model="dialogVisibleForm" :rules="dialogVisibleFormrules" ref="dialogVisibleForm" label-width="30px"
          class="demo-ruleForm">
          <el-form-item prop="jpass">
            <div class="yhm1">
              <div style="color: black;font-size: 14px; margin: 0;">旧密码</div>
              <el-input v-model="dialogVisibleForm.jpass"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="xpass">
            <div class="yhm1">
              <div style="color: black;font-size: 14px; margin: 0;">新密码</div>
              <el-input v-model="dialogVisibleForm.xpass" autocomplete="off"></el-input>
            </div>
          </el-form-item>

          <el-form-item prop="qpass">
            <div class="yhm1">
              <div style="color: black;font-size: 14px; margin: 0;">确认密码</div>
              <el-input v-model="dialogVisibleForm.qpass" autocomplete="off"></el-input>
            </div>
          </el-form-item>

        </el-form>
      </div>
      <div style="text-align: right; padding: 0 10px  10px 0;">
        <el-button style="
            width: 100px;
            height: 40px;
          " @click="dialogVisible = false">取 消</el-button>
        <el-button style="
            width: 100px;
            height: 40px;
            margin-left: 10px;
          " type="primary" @click="submitForm('dialogVisibleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  dl,
  WbeTitleList,
  xgmm
} from "../../https/api/user";
export default {
  name: "Login",
  data() {
    return {
      Name: '',
      title: "",
      isQuanPing: false,
      dialogVisible: false,
      ruleForm: {
        UserName: "",
        PassWord: "",
      },
      jmm: '',
      rules: {
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 18, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        Password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 18, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },

      rules: {
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 18, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        Password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 18, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      dialogVisibleFormrules: {
        jpass: [
          { required: true, message: "请输入旧密码", trigger: "blur" },

        ],
        xpass: [
          { required: true, message: "请输入新密码", trigger: "blur" },

        ],
        qpass: [
          { required: true, message: "请输入确认密码", trigger: "blur" },

        ],
      },

      dialogVisibleForm: {
        jpass: '',
        xpass: '',
        qpass: '',
      },
      loadingBtn: false,
    };
  },
  mounted() {
    this.Onlist();
  },
  methods: {
    dialogVisible1() {
      this.dialogVisible = true
      dl().then(res => {
        console.log(res, '查看旧密码');
        if (res.length > 0) {
          this.jmm = res[0].PassWord
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.jmm, this.dialogVisibleForm.jpass);
          if (this.jmm == this.dialogVisibleForm.jpass) {
            if (this.dialogVisibleForm.xpass == this.dialogVisibleForm.qpass) {
              const data = {
                PassWord: this.dialogVisibleForm.xpass,
              }
              xgmm(data).then(res => {
                console.log(res, '点击修改密码保存');
                if (res == '修改成功') {
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.dialogVisible = false
                } else {
                  this.$message.error('修改失败');
                }
              })

            } else {
              this.$message.error('请保持确认密码和新密码一致！！！');
            }
          } else {
            this.$message.error('密码错误！！！');
          }
        } else {

          return false;
        }
      });
    },
    Onlist() {
      WbeTitleList().then((res) => {
        console.log('标题', res);
        if (res) {
          this.Name = res[0].SystemNames

        } else {
          this.Name = ''
        }
      });
    },
    login() {
      // this.$router.push({
      //   name: "shouye",
      // });
      const data = {
        UserName: this.ruleForm.UserName,
        PassWord: this.ruleForm.PassWord
      }
      dl(data).then(res => {
        console.log('登录', res);
        if (res) {
          if (
            this.ruleForm.UserName == "admin" || this.ruleForm.UserName == 'user'
          ) {
            localStorage.setItem('User', this.ruleForm.UserName)

            this.$router.push({
              name: "shouye",
            });
          } else {
            this.$alert("用户名或者密码不正确", "用户验证", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        } else {
          this.$message.error('账号或密码错误');
        }

      })



    },
  },
};
</script>

<style lang="less" scoped>
body {
  margin: 0;
}

* {
  padding: 0;
  margin: 0;
  user-select: none;
}

.login {
  width: 100%;
  height: 100%;
  // background-image: url("../../assets/球阀状态/login.jpg");
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;

}

.xhtml {
  width: 100%;
  text-align: right;
  padding: 0 20% 0 0;
  color: white;
  font-size: 12px;
}

/deep/.el-dialog__header {
  padding: 0;
  text-align: center;
  padding: 10px 0 0 0;
}

/deep/.el-dialog__body {
  padding: 0;
}

.xhtmlpotions {
  width: 399px;
  height: 300px;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
}

.title {
  width: 480px;
  height: 60px;
  margin: 0 auto;
  padding: 30px 0 0 0;
  text-align: center;

  >div {
    font-size: 20px;
    font-weight: 500;
    // color: rgb(4, 50, 109);
    color: white;
    letter-spacing: 5px;
    // font-style: italic;
  }
}

.form {
  position: absolute;
  right: 240px;
  top: 200px;
  width: 500px;
  height: 360px;
  // background-image: url("../../assets/球阀状态/登录.png"); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 2px solid rgb(97, 90, 90);

}

.banben {
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: white;
}

/deep/ .el-input__inner {
  //   border: 3px solid rgb(12, 129, 177);
  width: 300px;
  height: 40px;
  margin-top: 10px;
}

/deep/ .el-form {
  margin-top: 20px;
}

/deep/ .el-button--primary {
  margin-left: 120px;
  text-align: center;
  margin-top: 20px;
}

.yhm1 {
  width: 400px;
  height: 40px;
  display: flex;
  align-items: flex-end;
  color: white;
  margin: 10px 0;

  >div:nth-child(1) {
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
}

.yhm {
  width: 400px;
  height: 40px;
  display: flex;
  align-items: flex-end;
  color: white;
  margin: 15px 0;

  >div:nth-child(1) {
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
}

.mm {
  width: 400px;
  height: 40px;
  display: flex;
  align-items: flex-end;
  color: white;
  margin: 15px 0 30px 0;

  >div:nth-child(1) {
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
}
</style>